import { useState } from 'react';
import { useHandler } from '@cfe/hooks';
import { Button, List, Modal, Tag } from 'antd';

import { numberWithThousands } from '@/utils/number';
const ViewAll = ({ onChange, value, coverage, rate, p_date }) => {
  const [showModal, setShowModal] = useState(false);
  const handleDeleteTag = useHandler((id) => {
    onChange(value.filter((item) => item.value !== id));
  });
  return (
    <>
      <Button
        type="link"
        style={{ paddingLeft: 0 }}
        onClick={() => setShowModal(true)}
        disabled={!value || value.length === 0}
      >
        查看全部
      </Button>
      <Modal
        open={showModal}
        onCancel={() => setShowModal(false)}
        footer={null}
      >
        <>
          <div style={{ marginTop: '30px', marginBottom: '20px' }}>
            <h3>当前标签详情 </h3>
            <p style={{ marginBottom: '5px' }}>
              {`当前的使用数据日期为: ${p_date || '-'}`}{' '}
            </p>
            <div style={{ display: 'flex' }}>
              <div style={{ marginRight: '20px' }}>
                覆盖人数：{numberWithThousands(coverage) ?? '-'} 人{' '}
              </div>
              <div>覆盖度：{rate ?? '-'}</div>
            </div>
          </div>
          <List
            style={{ height: 300, overflow: 'scroll' }}
            dataSource={value}
            renderItem={({ label, value }) => {
              return (
                <Tag
                  key={value}
                  closable
                  onClose={() => handleDeleteTag(value)}
                  style={{ marginTop: 5 }}
                >
                  {label}
                </Tag>
              );
            }}
          />
        </>
      </Modal>
    </>
  );
};
export default ViewAll;
